import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Form, Button, Input, Divider, Tag }  from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ parser, loading }) => ({
  parser,
  loading: loading.models.parser,
}))
@Form.create()
export default class Washer extends PureComponent{

  state = {
    content: '',
    title: '',
    show: 'none',
  };

  componentDidMount(){}

  parse = (title, content) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'parser/parse',
      payload: {
        content,
        title,
      },
    });
  };

  submit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        content: fieldsValue.content,
        title: fieldsValue.title,
        show: 'block',
      });
      this.parse(fieldsValue.title, fieldsValue.content);
    });
  };

  render(){
    const { form, parser: { tagResult, typeResult }, loading} = this.props;
    const { getFieldDecorator } = form;
    const { content, title, show } = this.state;

    return (
      <PageHeaderLayout
        title="文本分析"
        content={
          <div>
            <p>提取内容标签，契合系统标签推荐，才能获得更多的推荐流量。</p>
          </div>
        }
      >
        <Card bordered={false}>
          <Form onSubmit={this.submit} style={{ marginTop: 20}}>
            <FormItem>
              {getFieldDecorator('title', {
                rules: [{ required: true, message: '必填内容' }],
                initialValue: title,
              })(
                <Input placeholder="标题" />
              )}
            </FormItem>

            <FormItem>
              {getFieldDecorator('content', {
                rules: [{ required: true, message: '必填内容' }, { min: 100, message: '最少100个字符'}],
                initialValue: content,
              })(
                <TextArea placeholder="将文本黏贴在这儿" rows={10} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit" icon="check">开始分析</Button>
            </FormItem>
          </Form>
        </Card>
        <Card bordered={false} loading={loading} style={{ display: show, marginTop: 20}}>
          <Divider> 分析结果 </Divider>
          <div>
            <p>
              文章标签：{ tagResult.map(item =>  <Tag color="green" key={item.tag}> {item.tag || '无'} </Tag> )}
            </p>
            <p>
              文章分类(一级)：{ typeResult.lv1_tag_list.map(item => <Tag color="blue" key={item.tag}> {item.tag || '无'} </Tag> )}
            </p>
            <p>
              文章分类(二级)：{ typeResult.lv2_tag_list.map(item => <Tag color="geekblue" key={item.tag}> {item.tag || '无'} </Tag> )}
            </p>
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
